﻿@{
    Layout = null;
}
@using System.Web.Mvc.Html5
@model ExampleApplication.Models.Customer
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MVC Html5 Toolkit</title>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"
        rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="#">MVC Html5 Toolkit</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="/home/index">Home</a></li>
                        <li><a href="/home/about">About</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container">
        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            <h2>HTML5 Input Types</h2>
            <p>
                To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
            </p>
            <p>
                For more info on HTML5 visit <a href="http://www.html5rocks.com/" title="HTML5 Rocks">HTML5 Rocks</a>. and <a href="http://deanhume.com/Home/BlogPost/html5-input-types/25"
                    title="Dean Hume  - HTML5 Input Types">HTML5 Input Types</a>
            </p>
            <p>
                Standard Texbox:
                @Html.Html5TextBox("txtStandard")
            </p>
            <p>
                Standard Texbox with autofocus:
                @Html.Html5TextBox("txtStandard", InputTypes.InputType.Text, null, null, false, false, true)
            </p>
            <p>
                Standard Textbox with autocomplete:
                @Html.Html5TextBox("txtAutocomplete", InputTypes.InputType.Text, new { autocomplete = "on" })
            </p>
            <p>
                Colour Textbox:
                @Html.Html5TextBox("txtOne", InputTypes.InputType.Color)
            </p>
            <p>
                Email Address with placeholder:
                @Html.Html5TextBoxFor(model => model.CustomerEmail, InputTypes.InputType.Email, null, "Email Address")
            </p>
            <p>
                Textbox For:
                @Html.Html5TextBoxFor(model => model.CustomerName, InputTypes.InputType.Text, null, null)
            </p>
            <p>
                Textbox For with readonly:
                @Html.Html5TextBoxFor(model => model.CustomerName, InputTypes.InputType.Text, null, null, true)
            </p>
            <p>
                Textbox For with Html attributes:
                @Html.Html5TextBoxFor(model => model.CustomerName, InputTypes.InputType.Text, new { @class = "cssClass" }, null)
            </p>
            <p>
                Editor For:
                @Html.Html5EditorFor(model => model.CustomerName)
            </p>
            <p>
                Editor For with readonly:
                @Html.Html5EditorFor(model => model.CustomerName, InputTypes.InputType.Text, null, null, true)
            </p>
            <p>
                Editor For with Html attributes:
                @Html.Html5EditorFor(model => model.CustomerName, null, new { @class = "cssClass" })
            </p>
            <p>
                Editor For with Data Annotation:
                @Html.Html5EditorFor(model => model.CustomerEmail, null, null, "Email Address")
            </p>
            <p>
                Range:
                @Html.Html5Range(1, 100, 0, 23, null)
            </p>
            <p>
                Number:
                @Html.Html5Number(1, 50, 2, 50, null)
            </p>
            <p>
                Number Version 2:
                @Html.Html5TextBoxFor(model => model.CustomerAge, InputTypes.InputType.Number, new { max = 12, min = 40 })
            </p>
            <p>
                Password
                @Html.Html5TextBoxFor(x => x.CustomerName, InputTypes.InputType.Password, null, "Please complete password")
            </p>
            
            <input type="submit" />
        }
    </div>
</body>
</html>
